<template>
  <div :class="['page-header', layout, pageWidth]" style="margin-top: 20px">
    <div class="page-header-wide">
      <div class="breadcrumb">
        <a-breadcrumb>
          <template v-for="(item, index) in breadcrumb">
            <a-breadcrumb-item  :key="index" v-if="item!='首页'">
              <span @click="toPage(index,item)">{{item}}</span>
            </a-breadcrumb-item>
          </template>

        </a-breadcrumb>
      </div>
<!--      <div class="detail">-->
<!--        <div class="main">-->
<!--          <div class="row">-->
<!--            <h1 v-if="showPageTitle && title" class="title">{{title}}</h1>-->
<!--&lt;!&ndash;            <div class="action"><slot name="action"></slot></div>&ndash;&gt;-->
<!--          </div>-->
<!--          <div class="row">-->
<!--            <div v-if="this.$slots.content" class="content">-->
<!--              <div v-if="avatar" class="avatar"><a-avatar :src="avatar" :size="72" /></div>-->
<!--&lt;!&ndash;              <slot name="content"></slot>&ndash;&gt;-->
<!--            </div>-->
<!--&lt;!&ndash;            <div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>&ndash;&gt;-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'PageHeader',
  props: {
    title: {
      type: [String, Boolean],
      required: false
    },
    breadcrumb: {
      type: Array,
      required: false
    },
    logo: {
      type: String,
      required: false
    },
    avatar: {
      type: String,
      required: false
    },
  },
  computed: {
    ...mapState('setting', ['layout', 'showPageTitle', 'pageWidth'])
  },
  methods:{
    toPage(i){
      if(this.breadcrumb[i+1]=='设备详情'){
        this.$router.push('/device/manage')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  @import "index";
</style>
